<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="" style="height:100%">
		<view class="employee-list-content">
			<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true">
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<u-checkbox-group @change="checkboxGroupChange"  :wrap="true" style="width: 100%;" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
					<view class="u-flex u-row-between payorder-container " style="width: 100%;" v-for="item in dataList" :key="item.id" >
						<u-checkbox
							v-model="item.isCheck"
							:name="item.id"
							class="choose-radio"
						>
						</u-checkbox>
						<view class="payorder-section" style="flex:1">
							<view class="u-m-l-30">
								{{item.name}}
							</view>
						</view>
					</view>
				
				</u-checkbox-group>
				
				<view slot="bottom" class="u-p-40 ">
					<u-button class="sn-confirm-btn" @click="sendEmployee">确定</u-button>
				</view>
			</z-paging>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				chooseEmployeeIds:[],
			}
		},
		props:{
			chooseTagIds:{
				type:Array,
				default:()=>{
					return [];
				}
			}
		},
		created(){
			// this.$refs.paging.reload();
			this.chooseEmployeeIds = this.chooseTagIds;
			console.log(this.chooseTagIds);
		},
		methods: {
			checkboxGroupChange(val){
				console.log(val);
				this.chooseEmployeeIds = val;
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					TagType:256,
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/v1.3/Tag/GetTagsPage', { params: params } );
				uni.hideLoading({
					title: 'loading...'
				})
				if(res.code === 200){
					res.data.list.map(item=>{
							item.isCheck = this.chooseTagIds.includes(item.id);
						// item.isCheck = item.userId === this.chooseTagIds;
					});
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			sendEmployee(item) {
				let data = [];
				this.dataList.forEach(item=>{
					if(item.isCheck){
						data.push({
							name:item.name,
							id:item.id,
							tagId:item.id
						})
					}
				})
				let params = {
					dataList:data,
					idList:this.chooseEmployeeIds
				}
				this.$emit('getTag',params);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.employee-list-content {
		// min-height: 500rpx;
		height: 100%;
	}
	.payorder-container{
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 30rpx;
		&:nth-last-of-type(1){
			border: none;
		}
		.choose-radio{
			flex: 0 0 50rpx !important;
			width: 50rpx !important;
		}
		.payorder-header{
			display: flex;
			justify-content: space-between;
		}
		.payorder-section{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx 0;
			border-bottom: solid 1px #eaeaea;
			.section-image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.section-list{
				flex: 1;
				margin-left: 20rpx;
				
				.section-item{
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					.section-btn{
						width: 100rpx;
						margin: 0;
						height: 50rpx;
					}
				}
			}
			
		}
		
	}


</style>
